<template>
  <div class="page smartSafe">
    <sysHeader :active="'6'"></sysHeader>
    <!-- 左侧头部滚动列表 -->
    <div class="smartSafe_left_top">
      <div class="common_head">
        <div class="common_item active" style="cursor: pointer;">
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title" style="padding-left:29px">社区接入排行榜</div>
        </div>
        <div class="common_head_bg"></div>
        <div class="common_head_bg_r"></div>
      </div>
      <div class="smartSafe_left_top_content">
        <div class="common_title">
          <div class="common_title_item">区名</div>
          <div class="common_title_item">社区数量</div>
        </div>
        <div class="common_list_content list_content1">
          <vue-seamless-scroll :data="tableData" class="seamless_warp" :class-option="classOption">
            <div class="list_item" v-for="(item,index) in tableData" :key="index">
              <div class="item_item">{{item.area}}</div>
              <div class="item_item">{{item.number}}</div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <!-- 左侧底部滚动列表 -->
    <div class="smartSafe_left_bottom">
      <div class="keySearch_l_c_header">共享车位数列表</div>
      <div class="smartSafe_left_bottom_content">
        <div class="common_title">
          <div class="common_title_item">社区名称</div>
          <div class="common_title_item">已共享车位数</div>
          <div class="common_title_item">共享车辆信息</div>
        </div>
        <div class="common_list_content list_content1">
          <vue-seamless-scroll :data="tableData" class="seamless_warp" :class-option="classOption">
            <div class="list_item" v-for="(item,index) in tableData1" :key="index">
              <div class="item_item">{{item.area}}</div>
              <div class="item_item">{{item.number}}</div>
              <div class="item_item">
                <div class="item_btn">查看</div>
              </div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <!-- 中间左侧头部 -->
    <div class="center_left_top">
      <div class="newEnergy_l_c_header">车辆高峰分析</div>
      <div class="newEnergy_l_c_body">
        <sysChart :options="centerLeftOptions" :echart_height="'260px'"></sysChart>
      </div>
    </div>
    <!-- 中间左侧底部 -->
    <div class="center_left_bottom">
      <div class="common_header">
        <div class="common_item active">
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title" style="padding-left:29px">车位预约</div>
        </div>
        <div class="common_head_bg"></div>
        <div class="common_head_bg_r"></div>
      </div>
      <div class="smartSafe_c_l_b_body">
        <sysChart :options="centerLeftBottomOptions" :echart_height="'400px'"></sysChart>
      </div>
    </div>
    <!-- 中间右侧头部 -->
    <div class="center_right_top">
      <div class="top_box">
        <h2>社区停车利用率</h2>
        <div class="select_left_box">
          <el-select v-model="selectCommunity" placeholder="请选择社区" @change="selectCommunityChange">
            <el-option
              v-for="item in communityList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="bottom_box">
        <div class="park_num">
          <span>总泊位数：666</span>
          <span>剩余位数：321</span>
        </div>
        <sysChart :options="centerRightTopOptions" :echart_height="'300px'"></sysChart>
      </div>
    </div>
    <!-- 中间右侧底部 -->
    <div class="center_right_bottom">
      <div class="right_bottom_title">车辆进出场列表</div>
      <div class="c_r_b_content">
        <div class="content_title">
          <div class="title_item">社区名称</div>
          <div class="title_item">车牌号</div>
          <div class="title_item">进场时间</div>
          <div class="title_item">出场时间</div>
          <div class="title_item">照片</div>
        </div>
        <div class="common_list_content list_content2">
          <vue-seamless-scroll :data="tableData2" class="seamless_warp" :class-option="classOption">
            <div class="list_item" v-for="(item,index) in tableData2" :key="index">
              <div class="item_item">{{item.communityName}}</div>
              <div class="item_item">{{item.car}}</div>
              <div class="item_item">{{item.inTime}}</div>
              <div class="item_item">{{item.outTime}}</div>
              <div class="item_item">
                 <el-popover
                    placement="top-start"
                    width="200"
                    trigger="hover">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item.img"
                      ></el-image>
                    <el-button slot="reference"  style="color:#FF6C00">缩略图</el-button>
                  </el-popover>
              </div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <!-- 右侧头部 -->
    <div class="smartSafe_right_top">
      <div class="right_top_item">
        <div class="img_box">
          <img src="../../assets/images/icon_warning.png" alt="">
        </div>
        <div class="item_info">
          <h3>社区在线预警</h3>
          <div class="num">
            <DigitRoll :rollDigits="76" />
          </div>
        </div>
      </div>
      <div class="right_top_item">
        <div class="img_box">
          <img src="../../assets/images/car.png" alt="">
        </div>
        <div class="item_info">
          <h3>重点车辆预警</h3>
          <div class="num">
            <DigitRoll :rollDigits="66" />
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧底部 -->
    <div class="smartSafe_right_bottom">
      <div class="right_bottom_title">周边停车资源分析</div>
      <div class="r_b_content">
        <div class="content_title">
          <div class="title_item">社区名称</div>
          <div class="title_item">车场名称</div>
          <div class="title_item">车场类型</div>
          <div class="title_item">泊位数</div>
        </div>
        <div class="common_list_content list_content3">
          <vue-seamless-scroll :data="tableData3" class="seamless_warp" :class-option="classOption">
            <div class="list_item" v-for="(item,index) in tableData3" :key="index">
              <div class="item_item">{{item.communityName}}</div>
              <div class="item_item">{{item.parkName}}</div>
              <div class="item_item">{{item.parkType}}</div>
              <div class="item_item">{{item.parkNum}}</div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sysHeader from "@/components/common/sysHeader.vue";
import sysChart from "@/components/common/sysChart.vue";
import DigitRoll from "@huoyu/vue-digitroll";
import config from "@/api/config.js";
import util from "@/utils/util.js";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "smartSafe",
  data() {
    return {
      tableData: [
        {
          id: 1,
          area: "历下区",
          number: 26,
        },
        {
          id: 2,
          area: "历城区",
          number: 19,
        },
        {
          id: 3,
          area: "槐荫区",
          number: 16,
        },
        {
          id: 4,
          area: "高新区",
          number: 24,
        },
        {
          id: 5,
          area: "天桥区",
          number: 38,
        },
        {
          id: 6,
          area: "莱芜区",
          number: 12,
        },
        {
          id: 7,
          area: "章丘区",
          number: 4,
        },
        {
          id: 8,
          area: "市中区",
          number: 36,
        },
      ],
      tableData1: [
        {
          id: 1,
          area: "历下区",
          number: 227,
        },
        {
          id: 2,
          area: "历城区",
          number: 219,
        },
        {
          id: 3,
          area: "槐荫区",
          number: 216,
        },
        {
          id: 4,
          area: "高新区",
          number: 329,
        },
        {
          id: 5,
          area: "天桥区",
          number: 218,
        },
        {
          id: 6,
          area: "莱芜区",
          number: 95,
        },
        {
          id: 7,
          area: "章丘区",
          number: 43,
        },
        {
          id: 8,
          area: "市中区",
          number: 273,
        },
      ],
      tableData2:[
        {id:1,communityName:'鲁能领秀城',car:'鲁A062LV',inTime:'10:22:05',outTime:'19:50:04',img:'http://qgs34e21c.hd-bkt.clouddn.com/1.jpg'},
        {id:2,communityName:'阳光100',car:'鲁A063MQ',inTime:'11:18:15',outTime:'14:44:44',img:'http://qgs34e21c.hd-bkt.clouddn.com/2.jpg'},
        {id:3,communityName:'锦绣泉城',car:'鲁A0F16Z ',inTime:'09:05:04',outTime:'10:33:20',img:'http://qgs34e21c.hd-bkt.clouddn.com/3.jpg'},
        {id:4,communityName:'富翔天地',car:'鲁A0J0P0',inTime:'16:22:44',outTime:'18:30:20',img:'http://qgs34e21c.hd-bkt.clouddn.com/4.jpg'},
        {id:5,communityName:'泉城花园',car:'鲁A11J31 ',inTime:'16:55:55',outTime:'21:25:41',img:'http://qgs34e21c.hd-bkt.clouddn.com/5.jpg'},
        {id:6,communityName:'阳光舜城',car:'鲁A127JY ',inTime:'13:22:05',outTime:'19:12:13',img:'http://qgs34e21c.hd-bkt.clouddn.com/6.jpg'},
        {id:7,communityName:'彼岸新都',car:'鲁A1B89P',inTime:'10:22:05',outTime:'22:12:20',img:'http://qgs34e21c.hd-bkt.clouddn.com/7.jpg'},
        {id:8,communityName:'翡翠郡',car:'鲁A1E35F',inTime:'11:24:05',outTime:'16:20:20',img:'http://qgs34e21c.hd-bkt.clouddn.com/8.jpg'},
        {id:8,communityName:'诚基中心',car:'鲁A1S2K1',inTime:'02:22:05',outTime:'05:05:20',img:'http://qgs34e21c.hd-bkt.clouddn.com/8.jpg'},
        {id:8,communityName:'名仕豪庭',car:'鲁A1W2A0',inTime:'08:26:55',outTime:'16:05:00',img:'http://qgs34e21c.hd-bkt.clouddn.com/8.jpg'},
        {id:8,communityName:'伟东新都',car:'鲁A207V7 ',inTime:'06:16:15',outTime:'12:50:20',img:'http://qgs34e21c.hd-bkt.clouddn.com/8.jpg'},
        {id:8,communityName:'中润世纪城',car:'鲁A215NX',inTime:'07:28:05',outTime:'20:55:20',img:'http://qgs34e21c.hd-bkt.clouddn.com/8.jpg'},
      ],
      tableData3:[
        {id:1,communityName:'甸柳庄社区',parkName:'甸柳庄社区-停车场',parkType:'配建停车场',parkNum:'85'},
        {id:2,communityName:'李庄社区',parkName:'李庄社区-停车场',parkType:'配建停车场',parkNum:'156'},
        {id:3,communityName:'南徐社区',parkName:'南徐社区-停车场',parkType:'配建停车场',parkNum:'436'},
        {id:4,communityName:'济南绿园小区',parkName:'济南绿园小区-停车场',parkType:'配建停车场',parkNum:'1568'},
        {id:5,communityName:'香磨李社区',parkName:'香磨李社区-南侧地上停车场',parkType:'配建停车场',parkNum:'684'},
        {id:6,communityName:'北村社区',parkName:'北村社区停车场',parkType:'配建停车场',parkNum:'938'},
        {id:7,communityName:'北康社区',parkName:'北康社区停车场',parkType:'配建停车场',parkNum:'864'},
        {id:8,communityName:'鑫达小区',parkName:'鑫达小区-停车场',parkType:'配建停车场',parkNum:'1324'},
        {id:8,communityName:'中海国际社区',parkName:'中海国际社区-停车场',parkType:'配建停车场',parkNum:'1892'},
        {id:8,communityName:'南全福小区',parkName:'南全福小区-停车场',parkType:'配建停车场',parkNum:'386'},
        {id:8,communityName:'按察司街社区',parkName:'按察司街社区-停车场',parkType:'配建停车场',parkNum:'768'},
        {id:8,communityName:'南康社区',parkName:'南康社区停车场',parkType:'配建停车场',parkNum:'1842'},
      ],
      centerLeftOptions: {
        tooltip: {
          color: "#fff",
          trigger: "axis",
          formatter: "{a0}<br/>{c0}辆<br/>{a1}<br/>{c1}个",
        },
        legend: {
          top: 5,
          right: 5,
          icon: "rect",
          itemWidth: 10,
          textStyle: {
            color: "#ffffff",
            fontSize: 14,
            fontWeight: "bold",
          },
          itemHeight: 10,
          data: ["进场数量", "出场数量"],
        },
        xAxis: {
          type: "category",
          //data:["0:00","4:00","6:00","12:00","16:00","20:00",],
          axisTick: {
            show: true,
          },
          axisLine: {
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
            },
          },
          axisLabel: {
            color: "#32FFB4",
            fontSize: 14,
            fontWeight: "bold",
          },
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#32FFB4",
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        grid: {
          top: 40,
          left: "10%",
          right: "8%",
          bottom: 40,
        },
        series: [
          {
            name: "进场数量",
            type: "line",
            symbol: "none",
            smooth: true,
            itemStyle: {
              color: "#70FFE7",
            },
            lineStyle: {
              width: 0,
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(112,255,231,1)",
                },
                {
                  offset: 1,
                  color: "rgba(112,255,231,0.2)",
                },
              ]),
            },
            data: [],
            markLine: {
              data: [
                {
                  name: "平均线",
                  // 支持 'average', 'min', 'max'
                  yAxis: 500,
                },
              ],
            },
          },
          {
            name: "出场数量",
            type: "line",
            smooth: true,
            symbol: "none",
            itemStyle: {
              color: "rgba(255,148,77,1)",
            },
            lineStyle: {
              width: 0,
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255,148,77,1)",
                },
                {
                  offset: 1,
                  color: "rgba(255,148,77,0.2)",
                },
              ]),
            },
            data: [],
          },
        ],
      },
      centerLeftBottomOptions: {
        legend: {
          x: "center",
          textStyle: {
            fontSize: 14,
            fontWeight: "bold",
            color: "#FFFFFF",
          },
          symbol: "rect",
          itemWidth: 14,
          itemHeight: 14,
          bottom: 0,
          data: ["政区", "景区", "站区", "校圈", "医圈", "商圈"],
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color: [
          "#16CEB9",
          "#3F4357",
          "#2D99FF",
          "#F7517F",
          "#4346D3",
          "#6648FF",
        ],
        series: [
          {
            name: "车位预约",
            type: "pie",
            radius: "60%",
            clockwise: false,
            center: ["50%", "48%"],
            data: [],
            roseType: "radius",
            label: {
              formatter: "{b}：{d}%",
              fontWeight: "bold",
              fontSize: 14,
              color: "rgba(255, 255, 255, 1)",
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 1)",
              },
              length: 5,
              length2: 5,
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function () {
              return Math.random() * 200;
            },
          },
        ],
      },
      communityList: [
        { id: 1, name: "新黄社区1" },
        { id: 2, name: "新黄社区2" },
        { id: 3, name: "新黄社区3" },
        { id: 4, name: "新黄社区4" },
        { id: 5, name: "新黄社区5" },
        { id: 6, name: "新黄社区6" },
        { id: 7, name: "新黄社区7" },
        { id: 8, name: "新黄社区8" },
      ],
      selectCommunity: "", //选择社区
      centerRightTopOptions: {
        tooltip:{
          show:true,
          trigger:'axis',
          formatter: '{c}%'
        },
        grid:{
          top:10,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["0:00", "4:00", "8:00", "12:00", "16:00","20:00"],
          axisLine:{
            lineStyle:{
               color:'#32FFB4'
            },
          },
          splitLine:{
             show:true,
             lineStyle:{
               color:'#20314C'
            },
          },
          axisTick:{
            show:true
          }
        },
        yAxis: {
          type: "value",
          axisLine:{
            lineStyle:{
               color:'#32FFB4'
            },
          },
          splitLine:{
            show:false
          }
        },
        series: [
          {
            data: [20, 40, 50, 45, 70, 90],
            type: "line",
            itemStyle:{
              color:"#FF6C00",
              borderWidth:5
            },
            lineStyle:{
              width:3
            }
            
          },
        ],
      },
    };
  },
  components: {
    sysHeader,
    sysChart,
    vueSeamlessScroll,
    DigitRoll,
  },
  computed: {
    classOption() {
      return util.classOption;
    },
  },
  watch: {},
  created() {
    this.getLeftCenter();
    this.getCenterBottom();
  },
  methods: {
    //根据社区改变停车利用率
    selectCommunityChange() {},
    getLeftCenter() {
      this.$api.get(
        config.basePath + "park/index/chargingPileRate",
        {},
        (response) => {
          console.log("归属感三国杀", response);
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            const data1 = data[0].charging_car.map((item) => [
              item.name,
              item.num,
            ]);
            const data2 = data[1].charging_pile.map((item) => [
              item.name,
              item.num,
            ]);
            this.centerLeftOptions.series[0].data = data1;
            this.centerLeftOptions.series[1].data = data2;
            //this.centerLeftOptions.xAxis.
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getCenterBottom() {
      this.$api.get(
        config.basePath + "park/index/parkBooking",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            const list = data.map((item) => {
              return {
                name: item.name,
                value: parseInt(item.rate),
              };
            });

            this.centerLeftBottomOptions.series[0].data = list.sort(
              (a, b) => a.value - b.value
            );
            //console.log(response);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
  },
};
</script>

<style scoped>
div {
  box-sizing: border-box;
}
/* 右侧底部 */
.smartSafe_right_bottom{
  position: absolute;
  width: 456px;
  right: 12px;
  top:333px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #BFE8FF;
}
.smartSafe_right_bottom .right_bottom_title{
  width: 274px;
  height: 40px;
  line-height: 40px;
  background: url('~@/assets/images/right_title_bg.png') no-repeat;
  background-size: 100% 100%;
  font-size: 22px;
  text-align: right;
 padding-right: 10px;
}
.smartSafe_right_bottom .r_b_content{
     width: 100%;
}
.smartSafe_right_bottom .r_b_content .content_title{
  width: 100%;
  height: 48px;
  background: url('~@/assets/images/title_bg.png') no-repeat;
  background-size: 100% 100%;
  color: #BFE8FF;
  display: flex;
  font-size: 18px;
  align-items: center;
}
.r_b_content .content_title .title_item{
  flex:1;
  height: 100%;
  line-height: 48px;
  text-align: center;
}
.list_content3{
  height: 620px;
  overflow: hidden;
}
/* 右侧头部 */
.smartSafe_right_top{
  position: absolute;
  width: 456px;
  right: 12px;
  top:114px;
  height:187px ;
  color: #BFE8FF;
  display: flex;
  justify-content: space-between;
}
.smartSafe_right_top .right_top_item{
  width: 223px;
  height: 100%;
  box-sizing: border-box;
  background: url('~@/assets/images/roadOut_l_t_1_bg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.smartSafe_right_top .right_top_item .img_box{
  width: 80px;
  height: 80px;
}
.smartSafe_right_top .right_top_item .img_box img{
  display: block;
  width: 100%;
  height: 100%;
}
.smartSafe_right_top .right_top_item .item_info{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.smartSafe_right_top .right_top_item .item_info h3{
    font-size: 14px;
    margin:0;
    line-height: 20px;
}.smartSafe_right_top .right_top_item .item_info .num{
  font-size: 32px;
}
.smartSafe_right_top .right_top_item .item_info .num .d-roll-wrapper{
  margin:0;
}
/* 中间右侧底部 */
.center_right_bottom{
  position: absolute;
  right: 490px;
  width: 456px;
  top:575px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.center_right_bottom .right_bottom_title{
  width: 338px;
  height: 40px;
  background: url('~@/assets/images/home_left_center_bg.png') no-repeat;
  background-size: 100% 100%;
  text-align: center;
  line-height: 40px;
  font-size: 22px;
  color: #BFE8FF;
}
.center_right_bottom .c_r_b_content{
  width: 100%
}
.center_right_bottom .c_r_b_content .list_content2{
  height: 380px;
  overflow: hidden;
}
.center_right_bottom .c_r_b_content .content_title{
  width: 100%;
  height: 48px;
  background: url('~@/assets/images/title_bg.png') no-repeat;
  background-size: 100% 100%;
  color: #BFE8FF;
  display: flex;
  font-size: 18px;
  align-items: center;
}
.c_r_b_content .content_title .title_item{
  flex:1;
  height: 100%;
  line-height: 48px;
  text-align: center;
}
/* 中间右侧头部 */
.center_right_top {
  width: 457px;
  height: 353px;
  position: absolute;
  right: 490px;
  top: 167px;
  background-image: url("~@/assets/images/bg.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
}
.center_right_top .top_box {
  display: flex;
  justify-content: space-between;
}
.center_right_top .top_box h2 {
  font-size: 22px;
  color: #bfe8ff;
  margin: 0;
  line-height: 40px;
  text-indent: 10px;
}
/* 下拉框 */
.center_right_top .top_box .select_left_box {
  width: 200px;
  z-index: 150;
  /* height: 180px; */
}
.center_right_top .top_box .select_left_box >>> .el-select {
  width: 100%;
  margin-right: 10px;
}
.center_right_top .top_box .select_left_box >>> .el-input__inner {
  color: #1fb3ff;
}
.center_right_top .top_box .select_left_box >>> .el-input .el-input__inner {
  background: #01204d;
  border: 1px solid #1fb3ff;
}
.center_right_top
  .top_box
  .select_left_box
  >>> .el-input
  ::-webkit-input-placeholder {
  /* WebKit browsers 适配谷歌 */
  color: #1fb3ff;
}
.center_right_top .bottom_box .park_num{
  width: 100%;
  display: flex;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  height: 40px;
  align-items: center;
}
.center_right_top .bottom_box .park_num span {
  margin: 0 10px;
}
/* 左侧列表 */
.smartSafe_left_top {
  width: 456px;
  height: 478px;
  position: absolute;
  left: 12px;
  top: 115px;
}
.common_title {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  border: 1px solid #1b9eea;
  color: #bfe8ff;
  background-image: linear-gradient(#041332, #012b63);
}
.common_title_item {
  flex: 1;
  text-align: center;
}
.common_list_content {
  border: 1px solid #1b9eea;
  background: rgba(5, 16, 42, 0.8);
}
.seamless_warp {
  overflow: hidden;
}
.list_content1 {
  height: 393px;
  overflow: hidden;
}
.common_list_content .list_item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 72px;
  color: #32ffb4;
  background: none;
  cursor: pointer;
}
.common_list_content .list_item:nth-child(2n) {
  background: rgba(50, 63, 98, 0.2);
}
.common_list_content .list_item .item_item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;

}
.common_list_content .list_item .item_item /deep/ .el-button{
  background: none;
  border:none;
}

.list_item .item_item .item_btn {
  width: 55px;
  height: 26px;
  color: #32ffb4;
  font-size: 14px;
  text-align: center;
  line-height: 26px;
  /* border: 1px solid #1b9eea; */
  border-radius: 5px;
}
.common_header {
  height: 40px;
  position: relative;
  background-image: url("~@/assets/images/common_head_d_c.png");
  background-repeat: repeat;
  background-size: 74px 40px;
  background-position: 0 0;
  display: inline-block;
  /* float: left; */
}
/* 左侧底部 */
.smartSafe_left_bottom {
  position: absolute;
  left: 12px;
  top: 622px;
  width: 456px;
  height: 328px;
}
.keySearch_l_c_header {
  height: 40px;
  background-image: url("~@/assets/images/keySearch_l_c_bg.png");
  background-repeat: no-repeat;
  background-size: 456px 40px;
  background-position: center 0;
  padding-left: 67px;
  line-height: 40px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
}
.keySearch_l_c_tb_b {
  position: absolute;
  left: 0;
  top: 48px;
  width: 454px;
  bottom: 0;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
}
.keySearch_l_c_tb_h {
  width: 454px;
  height: 48px;
  background: linear-gradient(
    90deg,
    rgba(0, 45, 103, 1) 0%,
    rgba(5, 16, 42, 1) 100%
  );
  border: 1px solid rgba(27, 158, 234, 1);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
}
.keySearch_l_c_body {
  position: relative;
  margin-top: -1px;
  height: 288px;
  overflow: hidden;
}
.keySearch_l_t_header {
  height: 40px;
  background-image: url("~@/assets/images/keySearch_l_t_bg.png");
  background-repeat: no-repeat;
  background-size: 307px 40px;
  background-position: center 0;
  text-align: center;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
}
.keySearch_l_t_body {
  position: relative;
  margin-top: -1px;
  height: 288px;
  overflow: hidden;
}
.keySearch_l_t_tb_h {
  position: absolute;
  left: 0;
  top: 0;
  height: 48px;
  right: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 45, 103, 1) 0%,
    rgba(5, 16, 42, 1) 100%
  );
  border: 1px solid rgba(27, 158, 234, 1);
}
.keySearch_l_t_tb_b {
  position: absolute;
  left: 0;
  top: 48px;
  right: 0;
  bottom: 0;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
}
/* 新能源配比 */
.center_left_top {
  position: absolute;
  left: 492px;
  top: 167px;
  width: 437px;
  height: 319px;
  background-image: url("~@/assets/images/newEnergy_l_c_bg.png");
  background-repeat: no-repeat;
  background-size: 437px 319px;
  background-position: 0 0;
  z-index: 100;
}
.center_left_top .newEnergy_l_c_header {
  height: 40px;
  line-height: 40px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  padding-left: 9px;
}
.center_left_top .newEnergy_l_c_body {
  height: 280px;
}
/* 中间左侧底部 */
.center_left_bottom {
  position: absolute;
  left: 492px;
  top: 536px;
  width: 456px;
}
.smartSafe_c_l_b_body {
  width: 100%;
  height: 466px;
  border: 1px solid rgba(27, 158, 234, 1);
}
</style>